<!DOCTYPE html>

<html>
<head>
  <title>usersTabView.coffee</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" media="all" href="public/stylesheets/normalize.css" />
  <link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
  <div class="container">
    <div class="page">

      <div class="header">
        
          <h1>usersTabView.coffee</h1>
        

        
          <div class="toc">
            <h3>Table of Contents</h3>
            <ol>
              
                
                <li>
                  <a class="source" href="admin.html">
                    admin.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.auditData.html">
                    api.auditData.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.auditEvent.html">
                    api.auditEvent.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.html">
                    api.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.entity.html">
                    api.entity.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.map.html">
                    api.map.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.server.html">
                    api.server.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.variable.html">
                    api.variable.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.view.html">
                    api.view.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="app.instance.html">
                    app.instance.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="appjs.html">
                    appjs.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="data.html">
                    data.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="dataUtil.html">
                    dataUtil.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="manager.html">
                    manager.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="messages.html">
                    messages.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditData.html">
                    auditData.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditEvent.html">
                    auditEvent.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="base.html">
                    base.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entityDefinition.html">
                    entityDefinition.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entityObject.html">
                    entityObject.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="eventAction.html">
                    eventAction.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="eventRule.html">
                    eventRule.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="link.html">
                    link.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="map.html">
                    map.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shape.html">
                    shape.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="user.html">
                    user.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="userSettings.html">
                    userSettings.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="variable.html">
                    variable.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="adminRoutes.html">
                    adminRoutes.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="appRoutes.html">
                    appRoutes.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="settings.html">
                    settings.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="sockets.html">
                    sockets.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="tutorial.html">
                    tutorial.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="vectors.html">
                    vectors.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="statusTabView.html">
                    statusTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="toolsTabView.html">
                    toolsTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="usersTabView.html">
                    usersTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="adminView.html">
                    adminView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="alertView.html">
                    alertView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditDataManagerView.html">
                    auditDataManagerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditEventManagerView.html">
                    auditEventManagerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="baseView.html">
                    baseView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="createMapView.html">
                    createMapView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entityManagerView.html">
                    entityManagerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="footerView.html">
                    footerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="helpView.html">
                    helpView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entitiesTabView.html">
                    entitiesTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="inspectorTabView.html">
                    inspectorTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="mapTabView.html">
                    mapTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapeTabView.html">
                    shapeTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="controlsView.html">
                    controlsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="labelEditView.html">
                    labelEditView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="linkCreatorView.html">
                    linkCreatorView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="linkLabelsView.html">
                    linkLabelsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="linkView.html">
                    linkView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapeLabelsView.html">
                    shapeLabelsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapeView.html">
                    shapeView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapesMoverView.html">
                    shapesMoverView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="mapView.html">
                    mapView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="menuView.html">
                    menuView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="overlayView.html">
                    overlayView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="scriptEditorView.html">
                    scriptEditorView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="settingsView.html">
                    settingsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="startView.html">
                    startView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="variableManagerView.html">
                    variableManagerView.coffee
                  </a>
                </li>
              
            </ol>
          </div>
        
      </div>

      
        
        <h2 id="admin-users-tab-view">ADMIN USERS TAB VIEW</h2>

        
      
        
        <p>Represents the &quot;Users and Roles&quot; tab on the admin area.</p>

        
          <div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">SystemApp</span>.<span class="title">AdminUsersTabView</span> <span class="keyword">extends</span> <span class="title">SystemApp</span>.<span class="title">BaseView</span></span>

    <span class="attribute">$txtDisplayName</span>: <span class="literal">null</span>       <span class="comment"># the "display name" text field</span>
    <span class="attribute">$txtUsername</span>: <span class="literal">null</span>          <span class="comment"># the "username" text field</span>
    <span class="attribute">$txtPassword</span>: <span class="literal">null</span>          <span class="comment"># the "password" tet field</span>
    <span class="attribute">$txtPasswordConfirm</span>: <span class="literal">null</span>   <span class="comment"># the "confirm password" text field</span>
    <span class="attribute">$chkRoles</span>: <span class="literal">null</span>             <span class="comment"># the "roles" checkboxes</span>
    <span class="attribute">$butSave</span>: <span class="literal">null</span>              <span class="comment"># the "Save user" button</span>
    <span class="attribute">$userGrid</span>: <span class="literal">null</span>             <span class="comment"># the users grid</span>

    <span class="attribute">selectedUser</span>: <span class="literal">null</span>          <span class="comment"># the user beind edited at the moment</span></pre></div>
        
      
        
        <h2 id="init-and-dispose">INIT AND DISPOSE</h2>

        
      
        
        <p>Init the user tab view by settings the DOM and events.</p>

        
          <div class='highlight'><pre>    <span class="attribute">initialize</span>:<span class="function"> =&gt;</span>
        <span class="property">@setDom</span>()
        <span class="property">@setEvents</span>()

        SystemApp.Data.users.onFetchCallback = <span class="property">@bindUsers</span>
        SystemApp.Data.users.fetch()</pre></div>
        
      
        
        <p>Dispose the menu view.</p>

        
          <div class='highlight'><pre>    <span class="attribute">dispose</span>:<span class="function"> =&gt;</span>
        <span class="property">@baseDispose</span>()</pre></div>
        
      
        
        <p>Set all DOM elements.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setDom</span>:<span class="function"> =&gt;</span>
        <span class="property">@setElement</span> $ <span class="string">"#tab-users"</span>

        <span class="property">@$txtDisplayName</span> = $ <span class="string">"#user-txt-display-name"</span>
        <span class="property">@$txtUsername</span> = $ <span class="string">"#user-txt-username"</span>
        <span class="property">@$txtPassword</span> = $ <span class="string">"#user-txt-password"</span>
        <span class="property">@$txtPasswordConfirm</span> = $ <span class="string">"#user-txt-password-confirm"</span>
        <span class="property">@$chkRoles</span> = <span class="property">@$el</span>.find <span class="string">".edit .roles input"</span>
        <span class="property">@$butSave</span> = $ <span class="string">"#user-but-save"</span>

        <span class="property">@$userGrid</span> = $ <span class="string">"#user-grid"</span></pre></div>
        
      
        
        <p>Bind events to DOM.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setEvents</span>:<span class="function"> =&gt;</span>
        <span class="property">@listenTo</span> SystemApp.Data.users, <span class="string">"add"</span>, <span class="property">@addUserToGrid</span>
        <span class="property">@listenTo</span> SystemApp.Data.users, <span class="string">"remove"</span>, <span class="property">@removeUserFromGrid</span>

        <span class="property">@$butSave</span>.click <span class="property">@saveUser</span>

        $(<span class="built_in">document</span>).keyup <span class="property">@keyUp</span></pre></div>
        
      
        
        <h2 id="editing-users">EDITING USERS</h2>

        
      
        
        <p>Bind the current selected <a href="user.html">user</a> to the editing form.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindUserForm</span>:<span class="function"> =&gt;</span>
        <span class="keyword">if</span> <span class="keyword">not</span> <span class="property">@selectedUser</span>?
            <span class="property">@$txtDisplayName</span>.val <span class="string">""</span>
            <span class="property">@$txtUsername</span>.val <span class="string">""</span>
            <span class="property">@$txtPassword</span>.val <span class="string">""</span>
            <span class="property">@$txtPasswordConfirm</span>.val <span class="string">""</span>
            <span class="keyword">return</span>

        <span class="property">@$txtDisplayName</span>.val <span class="property">@selectedUser</span>.displayName()
        <span class="property">@$txtUsername</span>.val <span class="property">@selectedUser</span>.username()

        <span class="keyword">for</span> c <span class="keyword">in</span> <span class="property">@$chkRoles</span>
            chk = $ c
            <span class="keyword">if</span> <span class="property">@selectedUser</span>.hasRole chk.val()
                chk.prop <span class="string">"checked"</span>, <span class="literal">true</span>
            <span class="keyword">else</span>
                chk.prop <span class="string">"checked"</span>, <span class="literal">false</span></pre></div>
        
      
        
        <p>When user clicks the &quot;Save user&quot; button, validate the form and save.</p>

        
          <div class='highlight'><pre>    <span class="attribute">saveUser</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        displayName = $.trim <span class="property">@$txtDisplayName</span>.val()
        username = $.trim <span class="property">@$txtUsername</span>.val()
        password = $.trim <span class="property">@$txtPassword</span>.val()
        roles = []</pre></div>
        
      
        
        <p>Validate the form fields.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> username <span class="keyword">is</span> <span class="string">""</span>
            <span class="property">@warnField</span> <span class="property">@$txtUsername</span>
            <span class="keyword">return</span>
        <span class="keyword">else</span> <span class="keyword">if</span> password <span class="keyword">is</span> <span class="string">""</span>
            <span class="property">@warnField</span> <span class="property">@$txtPassword</span>
            <span class="keyword">return</span>
        <span class="keyword">else</span> <span class="keyword">if</span> password <span class="keyword">isnt</span> <span class="property">@$txtPasswordConfirm</span>.val()
            <span class="property">@warnField</span> <span class="property">@$txtPasswordConfirm</span>
            <span class="keyword">return</span></pre></div>
        
      
        
        <p>Make sure display name is set.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> displayName <span class="keyword">is</span> <span class="string">""</span>
            displayName = username</pre></div>
        
      
        
        <p>Get selected roles.</p>

        
          <div class='highlight'><pre>        <span class="keyword">for</span> chk <span class="keyword">in</span> <span class="property">@$chkRoles</span>
            <span class="keyword">if</span> $(chk).prop <span class="string">"checked"</span>
                roles.push $(chk).val()</pre></div>
        
      
        
        <p>Create model with specified attributes.</p>

        
          <div class='highlight'><pre>        props = {<span class="attribute">displayName</span>: displayName, <span class="attribute">username</span>: username, <span class="attribute">password</span>: password, <span class="attribute">roles</span>: roles}
        user = SystemApp.Data.users.create props, {<span class="attribute">wait</span>: <span class="literal">true</span>}</pre></div>
        
      
        
        <h2 id="users-grid">USERS GRID</h2>

        
      
        
        <p>When a new user is added to the users collection.</p>

        
          <div class='highlight'><pre>    <span class="attribute">addUserToGrid</span>: <span class="function"><span class="params">(user)</span> =&gt;</span>
        props = {<span class="attribute">displayName</span>: user.displayName(), <span class="attribute">username</span>: user.username(), <span class="attribute">roles</span>: user.roles().join(<span class="string">", "</span>)}
        row = _.template $(<span class="string">"#template-user-grid-row"</span>).html(), props
        row = $ row</pre></div>
        
      
        
        <p>Set row ID.</p>

        
          <div class='highlight'><pre>        row.attr <span class="string">"id"</span>, SystemApp.Settings.user.rowListPrefix + user.id</pre></div>
        
      
        
        <p>Bind edit and delete events.</p>

        
          <div class='highlight'><pre>        row.find(<span class="string">".actions .edit"</span>).click user, <span class="property">@editClick</span>
        row.find(<span class="string">".actions .delete"</span>).click user, <span class="property">@deleteClick</span></pre></div>
        
      
        
        <p>Append row to the <code>$userGrid</code>.</p>

        
          <div class='highlight'><pre>        <span class="property">@$userGrid</span>.append row</pre></div>
        
      
        
        <p>When a user is removed from the users collection.</p>

        
          <div class='highlight'><pre>    <span class="attribute">removeUserFromGrid</span>: <span class="function"><span class="params">(user)</span> =&gt;</span>
        row = $(<span class="string">"#"</span> + SystemApp.Settings.user.rowListPrefix + user.id)
        <span class="property">@modelElementRemove</span> row</pre></div>
        
      
        
        <p>Bind registered users to the users grid.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindUsers</span>:<span class="function"> =&gt;</span>
        <span class="property">@$userGrid</span>.empty()
        <span class="property">@addUserToGrid</span>(user) <span class="keyword">for</span> user <span class="keyword">in</span> SystemApp.Data.users.models</pre></div>
        
      
        
        <p>When user clicks the &quot;edit&quot; icon, highlight the row and bind user details
to the top form so it can be edited.</p>

        
          <div class='highlight'><pre>    <span class="attribute">editClick</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        <span class="keyword">if</span> <span class="property">@selectedUser</span>?
            $(<span class="string">"#"</span> + SystemApp.Settings.user.rowListPrefix + <span class="property">@selectedUser</span>.id).removeClass <span class="string">"active"</span></pre></div>
        
      
        
        <p>Highlight the clicked row.</p>

        
          <div class='highlight'><pre>        row = $(e.target).parent().parent()
        row.addClass <span class="string">"active"</span></pre></div>
        
      
        
        <p>Set <code>selectedUser</code> and bind to the edit form.</p>

        
          <div class='highlight'><pre>        <span class="property">@selectedUser</span> = e.data
        <span class="property">@bindUserForm</span>()</pre></div>
        
      
        
        <p>When user clicks the &quot;delete&quot; icon, make it red and if clicking again,
remove the user from the database and the row from the <code>$userGrid</code>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">deleteClick</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        e.preventDefault()
        e.stopPropagation()

        src = $ e.currentTarget</pre></div>
        
      
        
        <p>If the icon is red, then confirm the deletion by removing the row&#39;s associated model
from the <a href="data.html">data store</a>.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> src.hasClass <span class="string">"delete-red"</span>
            e.data.destroy()
        <span class="keyword">else</span>
            src.addClass <span class="string">"delete-red"</span></pre></div>
        
      
        
        <h2 id="helper-methods">HELPER METHODS</h2>

        
      
        
        <p>When user presses a key, check if it&#39;s Esc to cancel pending actions like
editing user details or deleting a user.</p>

        
          <div class='highlight'><pre>    <span class="attribute">keyUp</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        keyCode = e.keyCode

        <span class="keyword">if</span> keyCode <span class="keyword">is</span> <span class="number">27</span>
            <span class="property">@$el</span>.find(<span class="string">"div.delete"</span>).removeClass <span class="string">"delete-red"</span>
            <span class="property">@$el</span>.find(<span class="string">"div.row"</span>).removeClass <span class="string">"active"</span>
            <span class="property">@selectedUser</span> = <span class="literal">null</span>
            <span class="property">@bindUserForm</span>()

        <span class="property">@lastPressedKey</span> = keyCode</pre></div>
        
      
      <div class="fleur">h</div>
    </div>
  </div>
</body>
</html>
